<template>
	<view>
		<view class="technician">
			<view class="technician1 flex-r-b-c">
				<view class="view_img">
					<image :src="base.imgUrl+obj.timg" mode="widthFix" style="width: 146rpx;border-radius: 50%;">
					</image>
				</view>
				<view class="flex-c-b-s technician1_view">
					<view class="flex-r-b-c" style="width: 100%;">
						<text style="font-size: 36rpx;color: #4B4B4B;font-weight: 600;">{{obj.name}}</text>
						<text style="font-size: 28rpx;color: #4B4B4B;">{{obj.tname}}</text>
					</view>
					<view class="flex-r-s-c">
						<u-icon name="thumb-up-fill" size="26" color="#45806E"></u-icon>
						<text style="color: #555555;font-size: 24rpx;margin-left: 10rpx;">好评率：{{obj.praise}}%</text>
					</view>
				</view>
			</view>
			<view style="padding-bottom:30rpx;margin-top: 30rpx;border-bottom: 2rpx solid #F2F2F2;">
				<span style="color: #393939;font-size: 24rpx;font-weight: 600;">个人简介：</span>
				<span style="color: #555555;font-size: 22rpx;">{{obj.tintro}}</span>
			</view>
			<view class="flex-r-s-c" style="height:70rpx;width: 100%;">
				<text style="font-size: 24rpx;color: #4B4B4B;">个人展示 :{{obj.tworks.length!==0?'':'暂无个人展示'}} </text>
			</view>
			<scroll-view v-if="obj.tworks.length!==0" scroll-x="true" style="height:178rpx;box-sizing: border-box;white-space: nowrap;width:100%;">
				<view style="width: 182rpx;height: 178rpx;border-radius: 12rpx;background-color: #F4F4F4;display: inline-block;margin-right: 20rpx;"
					v-for="(v,i) in obj.tworks" :key="v">
					<image :src="v" mode="widthFix" style="width: 182rpx;border-radius: 12rpx;"
						@click="imgFD(i,obj.tworks)"></image>
				</view>
			</scroll-view>
		</view>
		<view class="technician_com" :style="{minHeight:view_hei+'px'}" v-if="list.total!==0">
			<view class="technician_view" v-for="(v,i) in list.data" :key='i'>
				<view class="technician_view_img flex-r-b-c">
					<view class="flex-r-s-c">
						<view class="technician_view_user flex-c-c-c">
							<image :src="v.userimg" mode="widthFix" style="width:60rpx;border-radius: 50%;"></image>
						</view>
						<text
							style="margin-left: 10rpx;color: #2E2E2E;font-size: 28rpx;font-weight: bold;">{{v.nickname}}</text>
						<view class="hp_view flex-c-c-c">
							<text>{{v.service}}</text>
						</view>
					</view>
					<text style="color: #797979;font-size: 24rpx;">服务项目: {{v.sname}}</text>
				</view>
				<view class="technician_view_text">
					<text>{{v.content}}</text>
					<view>
						<image style="width: 20vw; height: 20vw; margin-right: 30rpx;" v-for="(items,index) in v.images" :key="index" :src="base.imgUrl + items" @click="imgFD(index,v.images,1)" mode="aspectFill"></image>
					</view>
				</view>
				<view class="technician_view_time flex-c-c-e">
					<text style="color:#909090;font-size: 24rpx;">{{$u.timeFormat(v.createdate, 'yyyy-mm-dd hh:MM')}}</text>
				</view>
			</view>
		</view>
		<view style="text-align: center;" v-else>
			暂无评论
		</view>
		<view style="height: 120rpx;width: 100%;"></view>
<!-- 		<view class="flex-c-c-c btn">
			<view class="flex-c-c-c" @click="jump()">
				<text>去 预 约</text>
			</view>
		</view> -->
		<view style="background-color:#FFFFFF;" class="nextStep">
			<view class="nextStepBtn" @click="jump()">去 预 约</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj: {},
				id: null,
				base: this.$base,
				view_hei: this.$hei - uni.upx2px(338), //获取底下的高度
				list: {data:[]},
				page: 0,
			}
		},
		methods: {
			jump() {
				uni.switchTab({
					url: '/pages/tabBar/order/order'
				})
			},
			imgFD(i, arr,type) {
				if(type == 1){
					arr = arr.map(e => {
						return this.base.imgUrl + e
					})
				}
				uni.previewImage({
					urls: arr,
					current: i
				});
			},
			Service_technicianComment() {
				if (this.page === this.list?.current_page) return
				this.page++
				this.$api.Service_technicianComment({
					id: this.id,
					page: this.page,
					num: 10
				}).then(res => {
					console.log(res)
					let data=this.page==1?res.data.data.data:this.list.data.concat(res.data.data.data)
					res.data.data.data=data
					this.list = res.data.data
				})
			}
		},
		onReachBottom() {
			this.Service_technicianComment()
		},
		onLoad(el) {
			this.id = el.id
			this.$api.Service_technician({
				id: el.id
			}).then(res => {
				res.data.data.tworks =res.data.data.tworks?res.data.data.tworks.split("||"):[];
				res.data.data.tworks = res.data.data.tworks.map(els => {
					els = this.$base.imgUrl + els
					return els
				})
				this.obj = res.data.data
			})
			this.Service_technicianComment()
		}
	}
</script>

<style lang="less" scoped>
	.technician {
		width: 686rpx;
		min-height: 338rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx;
		margin: 20rpx 32rpx;
		background-image: url(../../static/icon/technician_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding: 26rpx;

		.technician1 {
			width: 634rpx;
			height: 146rpx;

			.view_img {
				width: 146rpx;
				height: 146rpx;
				border-radius: 50%;
				background-color: #F4F4F4;
			}

			.technician1_view {
				width: 420rpx;
				height: 120rpx;
				margin-right: 44rpx;
			}
		}
	}

	.technician_com {
		background-color: #FFFFFF;
		padding: 0px 32rpx;

		.technician_view {
			width: 100%;
			padding: 23rpx 0px;
			border-bottom: 2rpx solid #F2F2F2;

			.technician_view_img {
				height: 60rpx;

				.technician_view_user {
					height: 60rpx;
					width: 60rpx;
					background-color: #F4F4F4;
					border-radius: 50%;
				}

				.hp_view {
					margin-left: 36rpx;
					width: 94rpx;
					height: 38rpx;
					background: #45806E;
					border-radius: 8rpx;

					text {
						font-size: 22rpx;
						color: #FFFFFF;
					}

					// /deep/ .u-rate {
					// 	.u-icon {
					// 		font-size: 23rpx !important;
					// 		padding: 0rpx !important;
					// 	}
					// }
				}
			}

			.technician_view_text {
				margin-top: 28rpx;

				text {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #414141;
				}
			}

			.technician_view_time {
				margin-top: 18rpx;
			}
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 120rpx;
		width: 750rpx;
		background-color: #FFFFFF;

		view {
			width: 686rpx;
			height: 90rpx;
			background: #45806E;
			border-radius: 58rpx;

			text {
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
